<template>
  <!--  <div v-show="true" class="app-container home">-->
  <!--    <video id="videoElement" ref="videoPlayer" width="640" height="360">-->

  <!--    </video>-->
  <!--    <a-input v-model:value="videoSrc"></a-input>-->
  <!--    <div>-->
  <!--      <button @click="playVideo">播放</button>-->
  <!--      <button @click="pauseVideo">暂停</button>-->
  <!--    </div>-->
  <!--  </div>-->

  <div style="height: 100%;display: flex">
    <div style="width: 320px;display: flex;flex-direction: column">
      <a-card style="flex: 1;margin: 8px" title="组织列表">
        <el-table height="200" @row-click="organizationClick" :data="organizationList">
          <el-table-column label="Id" align="center" prop="OrganizationId"/>
          <el-table-column label="组织名称" align="center" prop="Name"/>
        </el-table>
      </a-card>
      <a-card style="flex: 1;margin: 8px" title="设备列表">
        <el-table height="200" @row-click="deviceClick" :data="deviceList">

          <el-table-column label="组织名称" align="center" prop="Name"/>
        </el-table>
      </a-card>
    </div>

    <div
        :class="isFullScreen?'fullScreenClass':''"
        style="display: flex;flex-direction: column;flex: 1;background: white;margin: 8px;border-radius: 16px;padding: 8px;box-sizing: border-box">
      <div style="width: 100%;flex: 1;height: 0px;">
        <video style="width: 100%;height: 100%" id="videoElement" ref="videoPlayer">

        </video>
      </div>
      <div style="height: 64px;display: flex;flex-direction: row;align-items: center;justify-content: space-around">

        <a-popover style="z-index: 99999999999" title="控制面板" trigger="click">
          <template style="width: max-content;z-index: 99999999999" #content>
            <a-form-item label="云台控制">
              <div
                  style="display: flex;flex-direction: column;align-items: center;width: max-content;justify-content: space-around;height: max-content;">
                <div style="display:flex;flex-direction: row">
                  <a-button style="transform: rotate(315deg);" @mousedown="longControlDevice('leftup')"
                            @mouseup="canCelLongControlDevice" size="large"
                            type="primary" shape="circle">
                    <ArrowUpOutlined/>
                  </a-button>
                  <a-button @mousedown="longControlDevice('up')" @mouseup="canCelLongControlDevice"
                            @click="controlDevice('up')" size="large" type="primary" shape="circle">
                    <ArrowUpOutlined/>
                  </a-button>
                  <a-button @mousedown="longControlDevice('rightup')" @mouseup="canCelLongControlDevice"
                            style="transform: rotate(45deg);" size="large"
                            type="primary" shape="circle">
                    <ArrowUpOutlined/>
                  </a-button>
                </div>
                <div style="display:flex;flex-direction: row">
                  <a-button style="transform: rotate(270deg);" @mousedown="longControlDevice('left')"
                            @mouseup="canCelLongControlDevice" size="large"
                            type="primary" shape="circle">
                    <ArrowUpOutlined/>
                  </a-button>
                  <a-button style="background: transparent" size="large" type="primary" shape="circle">

                  </a-button>
                  <a-button @mousedown="longControlDevice('right')" @mouseup="canCelLongControlDevice"
                            style="transform: rotate(90deg);" size="large"
                            type="primary" shape="circle">
                    <ArrowUpOutlined/>
                  </a-button>
                </div>
                <div style="display:flex;flex-direction: row">
                  <a-button @mousedown="longControlDevice('leftdown')" @mouseup="canCelLongControlDevice"
                            style="transform: rotate(215deg);" size="large"
                            type="primary" shape="circle">
                    <ArrowUpOutlined/>
                  </a-button>
                  <a-button @mousedown="longControlDevice('down')" @mouseup="canCelLongControlDevice"
                            style="transform: rotate(180deg);" size="large"
                            type="primary" shape="circle">
                    <ArrowUpOutlined/>
                  </a-button>
                  <a-button @mousedown="longControlDevice('rightdown')" @mouseup="canCelLongControlDevice"
                            style="transform: rotate(135deg);" size="large"
                            type="primary" shape="circle">
                    <ArrowUpOutlined/>
                  </a-button>
                </div>
              </div>
            </a-form-item>

            <a-form-item label="聚焦控制">

              <a-button @mousedown="longControlDevice('focusnear')"
                        @mouseup="canCelLongControlDevice" @click="controlDevice('focusnear')" size="large"
                        type="primary" shape="circle">
                <MinusCircleOutlined/>
              </a-button>

              <a-button @mousedown="longControlDevice('focusfar')"
                        @mouseup="canCelLongControlDevice" @click="controlDevice('focusfar')" size="large"
                        type="primary" shape="circle">
                <PlusCircleOutlined/>
              </a-button>
            </a-form-item>

            <a-form-item label="光圈控制">

              <a-button @mousedown="longControlDevice('irisout')"
                        @mouseup="canCelLongControlDevice" @click="controlDevice('irisout')" size="large" type="primary"
                        shape="circle">
                <MinusCircleOutlined/>
              </a-button>

              <a-button @mousedown="longControlDevice('irisin')"
                        @mouseup="canCelLongControlDevice" @click="controlDevice('irisin')" size="large" type="primary"
                        shape="circle">
                <PlusCircleOutlined/>
              </a-button>
            </a-form-item>
            <a-form-item label="速度">
              <a-slider v-model:value="speed" :min="1" :max="8"/>
            </a-form-item>

          </template>
          <a-button style="justify-self: left" size="large" type="primary" shape="circle">
            <ControlOutlined/>
          </a-button>
        </a-popover>


        <a-button @click="pauseVideo" v-if="isPlay" size="large" type="primary" shape="circle">
          <PauseCircleOutlined/>

        </a-button>
        <a-button v-if="!isPlay" size="large" type="primary" shape="circle">
          <PlayCircleOutlined/>

        </a-button>

        <a-button style="justify-self: left" @click="fullScreen()" size="large" type="primary" shape="circle">
          <FullscreenOutlined v-if="!isFullScreen"/>
          <FullscreenExitOutlined v-if="isFullScreen"/>
        </a-button>

      </div>
      <a-card v-if="false" style="margin: 8px;" title="操作">
        <div
            style="background: white;display: flex;flex-direction: row;align-items: center;justify-content: space-around">
          <div
              style="display: flex;flex-direction: column;align-items: center;width: max-content;justify-content: space-around;height: max-content">
            <div style="display:flex;flex-direction: row">
              <a-button @click="controlDevice('leftup')" size="large" type="primary" shape="circle">
                <ArrowUpOutlined/>
              </a-button>
              <a-button @click="controlDevice('up')" size="large" type="primary" shape="circle">
                <ArrowUpOutlined/>
              </a-button>
              <a-button @click="controlDevice('rightup')" size="large" type="primary" shape="circle">
                <ArrowUpOutlined/>
              </a-button>
            </div>
            <div style="display:flex;flex-direction: row">
              <a-button @click="controlDevice('left')" size="large" type="primary" shape="circle">
                <ArrowUpOutlined/>
              </a-button>
              <a-button size="large" type="primary" shape="circle">
                <ArrowUpOutlined/>
              </a-button>
              <a-button @click="controlDevice('right')" size="large" type="primary" shape="circle">
                <ArrowUpOutlined/>
              </a-button>
            </div>
            <div style="display:flex;flex-direction: row">
              <a-button @click="controlDevice('leftdown')" size="large" type="primary" shape="circle">
                <ArrowUpOutlined/>
              </a-button>
              <a-button @click="controlDevice('down')" size="large" type="primary" shape="circle">
                <ArrowUpOutlined/>
              </a-button>
              <a-button @click="controlDevice('rightdown')" size="large" type="primary" shape="circle">
                <ArrowUpOutlined/>
              </a-button>
            </div>
          </div>
          <a-button @click="pauseVideo" size="large">关闭</a-button>
        </div>
      </a-card>

    </div>
  </div>

  <a-modal>

  </a-modal>
</template>

<script>
import flvjs from "flv.js";
import {
  getAllDescribeOrganizationList,
  getDeviceDescribeDeviceChannel,
  getAllDeviceList,
  getControlDeviceStream,
  controlDevicePTZ
} from "@/api/business/tencentLive.js";

export default {
  data() {
    return {
      organizationList: [],
      deviceList: [],
      flvPlayer: null,
      title: "Vue.js 视频播放器",
      videoSrc: "",
      selectChannelId: [],
      selectChannel: [],
      isPlay: false,
      isFullScreen: false,
      speed: 4,
      longControl: false,
    };
  },
  mounted() {
    if (flvjs.isSupported()) {

    }
    this.getAllOrganizationList()

  },
  methods: {
    fullScreen() {
      this.isFullScreen = !this.isFullScreen;
    },
    getAllOrganizationList() {
      let that = this;
      getAllDescribeOrganizationList().then(res => {
        console.log(res.data.Response.Data)
        that.organizationList = res.data.Response.Data;

      })
    },
    getDeviceList(OrganizationId) {
      let that = this;
      getAllDeviceList(OrganizationId).then(res => {
        console.log(res);
        that.deviceList = res.data.Response.Data;

      });
    },

    getDeviceChannel(deviceId) {
      let that = this;
      getDeviceDescribeDeviceChannel(deviceId).then(res => {
        console.log(res.data.Response.Data[0].ChannelId);
        that.selectChannel = res.data.Response.Data[0];
        that.getDeviceStream(res.data.Response.Data[0].ChannelId);
      });
    },
    getDeviceStream(channelId) {
      let that = this;
      this.selectChannelId = channelId;
      getControlDeviceStream(channelId).then(res => {
        console.log(res);
        if (res.data.Response.Data != null) {
          console.log("在线");
          console.log(res.data.Response.Data.Flv);
          that.videoSrc = res.data.Response.Data.Flv;
          that.playVideo();
        }
      });
    },
    longControlDevice(type) {
      this.longControl = true;
      let interval = setInterval(async () => {
        await controlDevicePTZ(this.selectChannel.ChannelId, type, this.speed, this.selectChannel.Region).then(res => {
          console.log(res)
        });
        if (this.longControl == false) {
          clearInterval(interval)
        }
      }, 1000)
    },
    canCelLongControlDevice() {
      this.longControl = false;
    },
    controlDevice(type) {
      console.log(this.selectChannel);
      controlDevicePTZ(this.selectChannel.ChannelId, type, this.speed, this.selectChannel.Region).then(res => {
        console.log(res)
      });
    },
    organizationClick(row, column, event) {
      console.log('行数据:', row.OrganizationId);
      this.getDeviceList(row.OrganizationId);
    },
    deviceClick(row, column, event) {
      console.log('行数据:', row.DeviceId);
      this.getDeviceChannel(row.DeviceId);
    },
    playVideo() {
      var videoElement = document.getElementById('videoElement');
      this.flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: this.videoSrc,
        isLive: true,
        hasAudio: true,
      });
      this.flvPlayer.attachMediaElement(videoElement);
      this.flvPlayer.load();
      this.flvPlayer.play();
      this.isPlay = true;
    },
    pauseVideo() {
      this.$refs.videoPlayer.pause();
      this.flvPlayer.pause();
      this.flvPlayer.unload();
      this.flvPlayer.detachMediaElement();
      this.flvPlayer.destroy();
      this.flvPlayer = null;
      this.isPlay = false;
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.fullScreenClass {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999;
}


</style>

